<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100vh"></div>
    <div class="banner">
      <h1>欢迎您！</h1>
      <div class="input_outer">
        <span class="u_user"></span>
        <input id="uname" class="text" type="text" placeholder="请输入您的账号" v-model="username">
      </div>
      <div class="input_outer">
        <span class="us_user"></span>
        <input id="ups" v-model="password" class="text" placeholder="请输入您的密码" style="position: absolute"
               type="password">
      </div>
      <div>
        <button class="lb" style="color: #FFFFFF" @click="toLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import NET from "vanta/src/vanta.net";
import {ElMessage} from "element-plus";
import router from "../../router/router";
import {debounce} from "../../router/debounce";
// import {debounce} from "lodash/function";

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  mounted() {
    this.vantaEffect = NET({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.NET({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xffffff,
      backgroundColor: 0x98c3e3,
      points: 20.00,
      maxDistance: 22.00,
      spacing: 15.00
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
  methods: {
    toLogin() {
      if(this.username!=='' && this.password!==''){
        this.loginFun()
      }
    },
    loginFun: debounce(function (){   //使用匿名函数才能正确获取 this
      console.log(this)
      // axios.get('http://192.168.47.221:8080/employee/alogin',{
      //   params: {
      //     username: this.username,
      //     password: this.password
      //   }
      // }).then(response => {
      //   if(response.data !== "") {
      //     ElMessage({type:'success',message:'登陆成功！'});
      //     router.push('/adminMain');
      //   } else {
      //     ElMessage({ type: 'error', message: '账号或密码错误！' });
      //   }
      // }).catch(error => {
      //   ElMessage({ type: 'error', message: '登录失败！' });
      //   console.error(error);
      // })
      if (this.username === "13507436381" && this.password === "111111") {
        ElMessage({type: 'success', message: '登陆成功！'});
        // let router = useRouter();
        router.push('/adminMain');
      }
    },500)
  }
};
</script>

<style scoped>
.box {
  position: relative;
}

.box .banner {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 26%;
  left: 37%;
  background-color: rgba(99, 54, 86, 0);
}

.text {
  color: #FFFFFF !important;
  width: 220px;
  height: 46px;
  outline: none;
  display: inline-block;
  font: 14px "microsoft yahei", Helvetica, Tahoma, Arial, "Microsoft jhengHei";
  margin-left: 50px;
  border: none;
  background: none;
  line-height: 46px;
}

h1 {
  margin-left: 140px;
  margin-bottom: 20px;
  color: white;
  text-shadow: 5px 5px 5px rgba(150, 147, 147, 0.71);
}

.input_outer {
  height: 46px;
  padding: 0 5px;
  margin-bottom: 30px;
  border-radius: 50px;
  position: relative;
  border: rgba(255, 255, 255, 1) 2px solid !important;
}

.u_user {
  width: 25px;
  height: 25px;
  background-image: url(../../assets/images/icons/uname.png);
  background-position: -125px 0;
  position: absolute;
  margin: 10px 13px;
}

.us_user {
  width: 25px;
  height: 25px;
  background-image: url(../../assets/images/icons/upsw.png);
  background-position: -150px -50px;
  position: absolute;
  margin: 10px 13px;
}

.lb {
  width: 330px;
  line-height: 40px;
  font-size: 15px;
  border-radius: 50px;
  background: scroll;
  margin-left: 38px;
  border-color: #FFFFFF;
}
</style>
